<template>
    <header>
        <div class="header_top">
            <time>{{ currentTime }}</time>
            <div class="fullscreen">
                <button @click="toggleFullscreen">{{ currentScreen }}</button>
            </div>
        </div>
        <div class="header_bottom">
            <div class="workshop_select">
                <span class="label">选择车间：</span>
                <div class="workshop">
                    <button class="workshop_select_btn" @click="showWorkshop = !showWorkshop">{{ currentWorkShop
                        }}</button>
                    <ul class="workshop_select_list" v-if="showWorkshop">
                        <li v-for="workshop in workshopList" :key="workshop.id" @click="changeWorkshop(workshop)">{{
                            workshop.workshopName }}</li>
                    </ul>
                </div>
            </div>
            <div class="dashboard_select">
                <button class="button_yellow button_normal">预测/预警</button>
                <button class="button_center">生产进度看板</button>
                <button class="button_blue button_normal">企业驾驶舱</button>
            </div>
            <div class="operate_select">
                <div class="avatar">
                    <img src="../assets/avatar.jpg" alt="">
                </div>
                <div class="user_info" @click="showOperate = !showOperate">
                    <span>Admin</span>
                    <div class="triangle"></div>
                    <ul class="operate_list" v-if="showOperate">
                        <li>退出</li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
</template>

<script setup>
//全屏
const currentScreen = ref("全屏模式")

const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
        // 进入全屏
        document.documentElement.requestFullscreen().then(() => {
            currentScreen.value = "退出全屏";
        })
            .catch(err => {
                console.error(`全屏错误: ${err.message}`);
            })
    } else {
        // 退出全屏
        if (document.exitFullscreen) {
            document.exitFullscreen();
            currentScreen.value = "全屏模式";
        }
    }
}

// ESC 按键监听
const handleKeydown = (e) => {
  if (e.key === 'Escape' && document.fullscreenElement) {
    currentScreen.value = "全屏模式"
  }
}

// 全屏变化监听
const handleFullscreenChange = () => {
  currentScreen.value = document.fullscreenElement ? "退出全屏" : "全屏模式"
}

// 时间
const currentTime = ref('')
let timer = null

// 格式化时间为 "2024年10月10日 08:30:59 星期四"
const formatTime = () => {
    const now = new Date()
    const year = now.getFullYear()
    const month = (now.getMonth() + 1).toString().padStart(2, '0')
    const day = now.getDate().toString().padStart(2, '0')
    const hours = now.getHours().toString().padStart(2, '0')
    const minutes = now.getMinutes().toString().padStart(2, '0')
    const seconds = now.getSeconds().toString().padStart(2, '0')
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    const weekday = weekdays[now.getDay()]

    return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekday}`
}

// 更新时间
const updateTime = () => {
    currentTime.value = formatTime()
}

onMounted(() => {
    updateTime() // 立即更新一次
    timer = setInterval(updateTime, 1000) // 每秒更新一次

    document.addEventListener('keydown', handleKeydown)
    document.addEventListener('fullscreenchange', handleFullscreenChange)
})

onBeforeUnmount(() => {
    clearInterval(timer) // 组件卸载时清除定时器
    document.removeEventListener('keydown', handleKeydown)
    document.removeEventListener('fullscreenchange', handleFullscreenChange)
})

// 车间相关操作
const showWorkshop = ref(false);
const currentWorkShop = ref("所有车间")
const workshopList = [
    {
        workshopName: "所有车间",
        id: 0
    },
    {
        workshopName: "软床车间",
        id: 1
    },
    {
        workshopName: "沙发车间",
        id: 2
    }
]
const changeWorkshop = (workshop) => {
    currentWorkShop.value = workshop.workshopName;
    showWorkshop.value = false;
}

// 其他操作
const showOperate = ref(false);
</script>

<style scoped>
.header_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_top time {
    font-size: calc(42/var(--design_width) * 100vw);
    color: #fff;
}

.header_top .fullscreen button {
    cursor: pointer;
    font-size: calc(45/var(--design_width) * 100vw);
    color: var(--color_blue);
}

.header_bottom {
    margin-top: calc(15/1920 * 100vw);
    position: relative;
}

.workshop_select {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: calc(55/var(--design_width) * 100vw);
}

.workshop_select .label {
    font-size: calc(56/var(--design_width) * 100vw);
    color: var(--color_blue);
}

.workshop {
    position: relative;
    z-index:1000;
    font-size: calc(64/var(--design_width) * 100vw);
    color: #2f318b;
}

.workshop button {
    color: #2f318b;
    font-weight: bold;
    cursor: pointer;
    background-color: #62c3d0;
    padding: calc(5/var(--design_width) * 100vw) calc(45/var(--design_width) * 100vw);
}

.workshop_select .workshop_select_list {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 100%;
}

.workshop_select .workshop_select_list li {
    cursor: pointer;
    font-weight: bold;
    background-color: #62c3d0;
    margin-top: calc(5/var(--design_width) * 100vw);
    padding: calc(5/var(--design_width) * 100vw) calc(45/var(--design_width) * 100vw);
}

.dashboard_select {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../assets/header_main_button.png);
    background-size: 100% 100%;
}

.dashboard_select button {
    color: #fff;
    background-size: 100% 100%;
    cursor: pointer;
}

.dashboard_select .button_normal {
    font-size: calc(62/var(--design_width) * 100vw);
    margin-top: calc(30/var(--design_width) * 100vw);
    padding: calc(15/var(--design_width) * 100vw) calc(85/var(--design_width) * 100vw);
}

.dashboard_select .button_center {
    font-size: calc(78/var(--design_width) * 100vw);
    margin: 0 calc(100/var(--design_width) * 100vw);
    width: calc(1160/var(--design_width) * 100vw);
    height: calc(170/var(--design_width) * 100vw);
}

.dashboard_select .button_yellow {
    background-image: url(../assets/button_yellow.png);
}

.dashboard_select .button_blue {
    background-image: url(../assets/button_blue.png);
}

.operate_select {
    display: flex;
    align-items: center;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: calc(55/var(--design_width) * 100vw);
}

.operate_select .avatar {
    width: calc(100/var(--design_width) * 100vw);
    cursor: pointer;
    height: calc(100/var(--design_width) * 100vw);
    border-radius: 50%;
    overflow: hidden;
    margin-right: calc(22/var(--design_width) * 100vw);
}

.operate_select .avatar img {
    width: 100%;
    object-fit: cover;
}

.operate_select .user_info {
    font-size: calc(45/var(--design_width) * 100vw);
    line-height: 2;
    cursor: pointer;
    position: relative;
    padding-right: calc(80/var(--design_width) * 100vw);
}

.operate_select .user_info .triangle {
    width: 0;
    height: 0;
    border-left: calc(30/var(--design_width) * 100vw) solid transparent;
    border-right: calc(30/var(--design_width) * 100vw) solid transparent;
    border-top: calc(30/var(--design_width) * 100vw) solid #fff;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.operate_select .user_info .operate_list {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 100%;
}
</style>